<template>
  <div class="com">
    <el-result title="微信扫码选位置打卡" subTitle="二维码5分钟内有效">
      <template slot="icon">
        <div class="img-box">
          <el-image class="full" v-show="isShowPage" :src="`data:image/png;base64,${qrCodeUrl}`" />
        </div>
      </template>
      <template slot="extra">
        <span class="text-red">提示: 微信端完成打卡后才能关闭此窗口</span>
      </template>
    </el-result>
  </div>
</template>

<script>
export default {
  name: 'RemarkClockIn',

  components: {},

  props: {
    houseId: {
      type: String,
      default: ''
    },
    address: {
      type: String,
      default: ''
    },
    portUserId: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      isShowPage: false,
      qrCodeUrl: '',
      requestId: ''
    };
  },

  computed: {},

  watch: {},

  beforeMount() {},

  mounted() {
    this.getQrcodeReqId();
  },

  beforeDestroy() {
    this.$emit('remarkChange', this.requestId);
  },

  methods: {
    // function
    async getQrcodeReqId() {
      try {
        const { houseId, address, portUserId } = this;
        let res = await this.$api.getQrcodeReqId({
          address,
          houseId,
          portUserId
        });
        if (res && res.content) {
          this.qrCodeUrl = res.content.qrCode;
          this.requestId = res.content.requestId;
        }
      } catch (error) {
      } finally {
        this.isShowPage = true;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.com {
  & /deep/ .el-result {
    padding-top: 0;
  }
}
.img-box {
  width: 200px;
  height: 200px;
}
</style>
